<template>
  <div id="printme">
    <el-button v-print="'printme'" type="primary" size="small">打印</el-button>
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工号" style="width: 400px;">
            <el-input v-model="ruleForm.workNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-date-picker v-model="ruleForm.timeOfEntry" type="date" placeholder="请选择入职日期" style="width: 80%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="12">
          <el-form-item label="姓名" style="width: 400px;">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-input v-model="ruleForm.departmentName" placeholder="请选择员工部门" style="width: 80%" @focus="isShow = true" />
            <el-tree v-if="isShow" :data="departmentList" :props="{ label: 'name' }" @node-click="handleNodeClick" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机">
            <el-input v-model="ruleForm.mobile" placeholder="请输入员工手机号" style="width: 80%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="聘用形式">
            <el-select v-model="ruleForm.formOfEmployment" placeholder="请选择负责人" style="width: 80%;">
              <el-option label="正式" :value="1" />
              <el-option label="非正式" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="员工头像">
        <image-upload ref="staffPhoto" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveUserInfo">更新保存</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDepartment } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import { getUserDetailById, changeUserInfoById } from '@/api/user'
export default {
  data() {
    return {
      isShow: false,
      departmentList: [],
      id: this.$route.params.id,
      ruleForm: {
        mobile: '', // 员工手机号
        password: '',
        staffPhoto: '', // 员工头像地址
        timeOfEntry: '', // 员工入职日期
        username: '',
        orkNumber: ''
      }
    }
  },
  created() {
    this.getRoleInfo()
    this.getDepartmentInfo()
  },

  methods: {
    // 获取员工基本信息
    async getRoleInfo() {
      const res = await getUserDetailById(this.$route.params.id)
      this.ruleForm = res.data
      if (this.ruleForm.staffPhoto) {
        // 这里我们赋值，同时需要给赋值的地址一个标记 upload: true
        this.$nextTick(() => {
          this.$refs.staffPhoto.fileList = [{ url: this.ruleForm.staffPhoto, upload: true }]
        })
      }
    },
    // 获取部门组织架构
    async  getDepartmentInfo() {
      const { data } = await getDepartment()
      this.departmentList = tranListToTreeData(data.depts, '')
    },
    // 选择部门
    handleNodeClick(data) {
      this.ruleForm.departmentName = data.name
      this.isShow = false
    },
    async saveUserInfo() {
      const fileList = this.$refs.staffPhoto.fileList // 读取上传组件的数据
      if (fileList.some(item => !item.upload)) {
        //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
        this.$message.warning('您当前还有图片没有上传完成！')
        return
      }
      this.ruleForm.staffPhoto = fileList.length ? fileList[0].url : ''
      const res = await changeUserInfoById(this.id, this.ruleForm)
      if (res.success) {
        this.$message.success('更新成功')
        this.getRoleInfo()
      }
    }
  }
}

</script>

<style scoped>
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
